<template>
  <div class="wrap" ref="wrapbox">
    <div>
      <!--hot-->
      <div class="hot">
        <h4 class="hh">热门城市</h4>
        <ul class="uu">
          <li v-for="item in hotCities" @click="citym(item.name)">{{item.name}}</li>
        </ul>
      </div>
      <!--sort-->
      <div class="sort">
        <h4 class="hh">字母排序</h4>
        <ul class="uu">
          <li v-for="(item,value) of cities" @click="changge(value)">{{value}}</li>
        </ul>
      </div>
      <!--list-->
      <div class="List">
        <div v-for="(value,key,index) of cities">
          <h4 class="hh">{{key}}</h4>
          <ul class="uu">
            <li v-for="item in value" :ref="key" @click="citym(item.name)">{{item.name}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import BScroll from 'better-scroll'
  import {mapMutations} from 'vuex'
  export default {
    data() {
      return {
        scroll:""
      }
    },

    props: ["hotCities", "cities"],
    mounted() {
      let wrap = this.$refs.wrapbox
      this.scroll = new BScroll(wrap ,{click:true})
    },
    methods:{
      changge(val){
        console.log(this.$refs[val][0])
        this.scroll.scrollToElement(this.$refs[val][0],1000)
      },
      citym(val){
        console.log(val)
        this.changcity(val)
        this.$router.push("/")
      },
      ...mapMutations(['changcity'])
    }
  }
</script>

<style scoped>
  .wrap {
    background-color: #f5f5f5;
    position: absolute;
    top: .44rem;
    left: 0;
    right: 0;
    bottom: 0;
  }

  /*list*/
  .List .hh {
    font-size: .12rem;
    line-height: .12rem;
    font-weight: normal;
    padding: .12rem .13rem;
    background-color: #f5f5f5;
  }

  .List .uu {
    overflow: hidden;
    text-align: center;
    position: relative;
    background-color: #fff;
    line-height: .45rem;
    color: #212121;
  }

  .List .uu:before {
    content: '';
    position: absolute;
    width: 25%;
    left: 25%;
    height: 100%;
    border-left: .01rem solid #ddd;
    border-right: .01rem solid #ddd;
  }

  .List .uu:after {
    content: '';
    position: absolute;
    right: 25%;
    height: 100%;
    border-left: .01rem solid #ddd;
    border-right: 0
  }

  .List .uu li {
    border-bottom: .01rem solid #ddd;
    line-height: .45rem;
    width: 25%;
    font-size: .14rem;
    text-align: center;
    float: left;
    position: relative;
    color: #212121;
  }

  /*hot*/
  .hot {
    color: #212121;
  }

  .hot .hh {
    font-size: .12rem;
    line-height: .24rem;
    margin-left: .13rem;
    font-weight: normal;
  }

  .hot .uu {
    overflow: hidden;
    text-align: center;
    position: relative;
    background-color: #fff;
  }

  .hot .uu :before {
    content: "";
    position: absolute;
    width: 33.333%;
    left: 33.333%;
    height: 100%;
    border-left: .01rem solid #ddd;
    border-right: .01rem solid #ddd;
  }

  .hot .uu li {
    width: 33.3333%;
    float: left;
    font-size: .14rem;
    border-bottom: .01rem solid #ddd;
    line-height: .45rem;
    /*position:relative;*/
  }

  /*sort*/
  .sort .hh {
    font-size: .12rem;
    line-height: .24rem;
    margin-left: .13rem;
    font-weight: normal;
  }

  .sort .uu {
    overflow: hidden;
    background-color: #fff;
    text-align: center;
    line-height: .45rem;
    color: #212121;
  }

  .sort .uu li {
    width: 16.667%;
    float: left;
    font-size: .14rem;
  }
</style>
